<!-- 购物卡结佣管理-购物卡结佣待确认--->
<template>
  <div class="toBeConfirm">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/shoppingCardSettlement' }">购物卡结佣</el-breadcrumb-item>
      <el-breadcrumb-item>结佣确认</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="order">
      <span>
        <b>结算单id:</b>
        {{brokerApply.batchCode}}
      </span>
    </div>
    <commissions :brokerApply="brokerApply" :awardInfoList="awardInfoList"></commissions>
    <div class="textTitle">
      <span>购物卡结佣：</span>
      <span>
        <el-button size="small" type="primary" @click="toChange">更改</el-button>
      </span>
    </div>
    <div class="textSub">
      <span>
        <b>金额合计：</b>
        {{totalAmounts()}}
      </span>
      <span>
        <b>数量：</b>
        {{cartLists.length}}
      </span>
    </div>
    <el-table :data="cartLists" border style="width: 100%">
      <el-table-column align="center" prop="id" label="购物卡id" width="80"></el-table-column>
      <el-table-column align="center" prop="devName" label="所属楼盘"></el-table-column>
      <el-table-column align="center" prop="typeName" label="购物卡类别"></el-table-column>
      <el-table-column align="center" prop="cardCode" label="卡号"></el-table-column>
      <el-table-column align="center" prop="cardPassword" label="卡密"></el-table-column>
      <el-table-column align="center" sortable prop="cardDenomination" label="面额"></el-table-column>
      <el-table-column align="center" prop="cardMedia" label="电子卡/实体卡">
        <template slot-scope="scope">
          <span v-if="scope.row.cardMedia == 1">电子卡</span>
          <span v-else>实体卡</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="inStoreDate" label="入库时间"></el-table-column>
      <el-table-column align="center" prop="orderId" label="所属订单"></el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page.sync="tableConfig.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="tableConfig.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="cartTotal"
      ></el-pagination>
    </div>
    <div class="forms">
      <el-button type="primary" @click="confirm">确认结佣</el-button>
      <el-button @click="onClear">取消</el-button>
    </div>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import commissions from "../../common/xkCommission";
export default {
  name: "toBeConfirm",
  components: {
    commissions
  },
  data() {
    return {
      cartLists: [], // 购物卡列表
      cartTotal: 0,
      tableConfig: {
        pageSize: 10,
        pageNum: 1,
        orderList: []
      },
      brokerApply: {},
      awardInfoList: [],
      shoppingCardList: [],
      batchCode: "", // 批次号
      multipleSelection: [],
      orderIdList: [],
      cardAmount: 0,
      totalAmount: 0,
      sourceCategory: '',
      cardIds: []
    };
  },
  created() {
    this.batchCode = this.$route.query.batchCode;
    this.sourceCategory = this.$route.query.sourceCategory;
    this.brokerApply.isRecord = false;
    this.brokerInfo();
  },
  methods: {
    // 经纪人信息和订单明细
    brokerInfo() {
      this.axios
        .post(api.getSettleCommDetail, { batchCode: this.batchCode })
        .then(data => {
          let res = data.data;
          if (res.code === 200) {
            this.brokerApply = res.data.brokerApply;
            //this.cardAmount = res.data.brokerApply.cardAmount;
            this.totalAmount = res.data.brokerApply.applyAmount;
            this.awardInfoList = res.data.awardInfoList;
            return res.data;
          }
        })
        .then(res => {
          this.tableConfig.devId = res.brokerApply.devId;
          for (let item of res.awardInfoList) {
            this.tableConfig.orderList.push(item.orderId);
          }
          this.cardListByPage();
        });
    },
    // 购物卡列表（结佣待确认状态的列表）
    cardListByPage() {
      this.tableConfig['terminalSource'] = this.sourceCategory
      this.axios
        .post(api.getBindingShopCardListByPage, this.tableConfig)
        .then(data => {
          let res = data.data;
          if (res.code === 200) {
            this.cartLists = res.data.list;
            for(let item of this.cartLists) {
              this.cardIds.push(item.id)
            }
            this.cardAmount = res.data.cardAmount;
            this.cartTotal = res.data.total;
            for(let item of res.data.list) {
              this.orderIdList.push(item.id)
            }
          }
        });
    },
    // 金额合计
    totalAmounts() {
      let money = 0;
      for (let item of this.cartLists) {
        money += (item.cardDenomination * 100) / 100;
      }
      return `￥${money}元`;
    },
    // 确认结佣
    confirm() {
      if(this.cardAmount != this.totalAmount) {
        return this.$message({
          type: 'error',
          message: '选择的购物卡结佣金额须等于待结佣购物卡金额!'
        })
      }
      let shopCardList = [];

      for (let item of this.cartLists) {
        shopCardList.push({ cardId: item.id, cardDenomination: item.cardDenomination });
      }
      let ruleForm = {
        batchCode: this.batchCode,
        terminalSource: this.sourceCategory,
        shopCardList: shopCardList
      };
      this.axios.post(api.settleConfirm, ruleForm).then(data => {
        let res = data.data;
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.$router.push({ path: "./shoppingCardSettlement" });
        }
      });
    },
    onClear() {
      this.$router.push("./shoppingCardSettlement");
    },
    handleSizeChange(size) {
      this.tableConfig.pageSize = size;
      this.cartLists();
    },
    handleCurrentChange(page) {
      this.tableConfig.pageNum = page;
      this.cartLists();
    },
    // 更改
    toChange() {
      this.$router.push({
        path: "./shoppingCardSettlementCommission",
        query:{
          batchCode: this.batchCode,
          isChange: true,
          cardIds:this.cardIds,
          orderIdList:this.tableConfig.orderList,
          sourceCategory:this.sourceCategory
        }
      })
    }
  }
};
</script>
<style lang="stylus" scoped>
.toBeConfirm {
  font-size: 14px;

  .order {
    margin-bottom: 25px;
  }

  .textTitle {
    line-height: 40px;
    margin-top: 20px;
  }

  .textSub {
    width: 100%;
    padding-left: 5px;
    box-sizing: border-box;
    background: #eceaea;
    line-height: 35px;
  }

  table {
    border-collapse: collapse;
    margin: 0 auto;
  }

  table tr td {
    border: 1px solid #ccc;
    line-height: 40px;
    text-align: center;
  }

  .forms {
    margin: 15px auto;
    text-align: center;
  }
}
</style>


